<template>
    <div>
        <v-form-designer
            ref="vfDesigner" 
            :field-list-api="fieldListApi" 
            :designer-config="designerConfig">


            <!-- 自定义按钮插槽演示 -->
            <template #customToolButtons>
                <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
            </template>


        </v-form-designer>

        <el-dialog title="添加表单描述" :visible.sync="dialogFormVisible">
            <el-form ref="elForm" :rules="rules" :model="form">
                <el-form-item prop="formName" label="表单名称">
                    <el-input v-model="form.formName" placeholder="请输入表单名称" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="description" label="表单描述">
                    <el-input v-model="form.description" placeholder="请输入表单描述" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { CreateForm } from '@/api/forms';
export default {
    data() {
        return {
            fieldListApi: {
                URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
                labelKey: 'fieldLabel',
                nameKey: 'fieldName'
            },

            //testBanned: ['sub-form', 'alert'],

            designerConfig: {
                languageMenu: false,
                externalLink: false,
                formTemplates: false,
                eventCollapse: false,
                clearDesignerButton: false,
                previewFormButton: false,
                importJsonButton: false, // 不显示导入按钮
                exportJsonButton: false, // 不显示导出按钮
                //是否显示导出代码按钮
                exportCodeButton: false,

                //是否显示生成SFC按钮
                generateSFCButton: false,
                // presetCssCode: '.abc { font-size: 16px; }',
            },

            form: {
                formName: '',
                description: '',
                formJson:''
            },

            rules: {
                formName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }],
                description: [{ required: true, message: '表单描述不能为空', trigger: 'change' }]
            },

            dialogFormVisible: false,
        };
    },

    methods: {
        clearall() {
            this.$refs.vfDesigner.clearDesigner();
        },

        // saveFormJson() {
        //     let formJson = this.$refs.vfDesigner.getFormJson()
        //     //TODO: 将formJson提交给后端保存接口，需自行实现！！
        //     //后端需要一个接口，来保存表单的JSOn数据（新增）

        //     this.$message.success('表单已保存！')
        // },
        saveFormJson() {
            this.dialogFormVisible = true;
        },

        createForm() {
            this.$refs['elForm'].validate((valid) => {
                if (!valid) 
                    return;

                //获取表单设计器的JSON对象   
                let formJson = this.$refs.vfDesigner.getFormJson();
                console.log(formJson);
            
                //  将formJson提交给后端保存接口，需自行实现！！
                this.form.formJson = formJson;
                CreateForm(this.form).then((res) => {
                    if (res > 0) {
                        this.$message.success('表单新建成功！');
                        this.dialogFormVisible = false;
                        this.$router.push('/FormDesigner');
                    } else {
                        this.$message.error('表单新建失败！');
                        this.dialogFormVisible = false;
                    }
                });
            });
        },
        resetForm() {
            this.$refs['elForm'].resetFields();
        },

        comeback() {
            this.$router.push('/FormDesigner');
        }
    }
};
</script>
